<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="活动详情" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		<u-swiper
		        height="366rpx"
				:list="list1"
				
		></u-swiper>
		<view class="bf p20"
		 :style="{height:high + 'rpx' }"
		 style="position: fixed;bottom: 0;width: 100vw;border-radius: 40rpx 40rpx 0rpx 0rpx;">
			<view class="f-c  cp fb mt20 f36">
				{{info.title}}
			</view>
			<view class="f-s-b">
				<view class="mt20 c3 f28">活动状态：{{info.status  == 1 ? '关闭':'进行中'}}</view>
				<view class="f-c  c9 f24 mt10">
					已有{{info.joinNum}}人参与
				</view>
			</view>
			
			<view class="f-c c6 f28 mt20">
				{{info.content}}
				<!-- 分格垃圾桶是目前市场上比较常见的，这样分格设计更便
				于分类，如果是在厨房，一个垃圾桶就能同时放置干垃圾
				和湿垃圾，省时又节约空间。此外，最好还要选择带盖的
				分类垃圾桶，避免垃圾异味渗出。垃圾桶的材质也同样重
				要，选择一款抑菌材质的垃圾桶还能保持家的整洁和卫生
				。垃圾分类是关系到每个人生活的一件事，想要轻松分类
				垃圾，那就从挑垃圾桶开始吧 -->
			</view>
			<view class="c3 fb mt30">活动详情</view>
			<view class="mt20 c3 f28">活动开始时间：{{info.startTime}}</view>
			<view class="mt20 c3 f28">活动结束时间：{{info.endTime}}</view>
			
			<view class="c3 fb mt30">举办方信息</view>
			<view class="mt20 c3 f28">发起机构：{{info.organizer}}</view>
			<view class="mt20 c3 f28">联系人：{{info.contactor}}</view>
			<view class="mt20 c3 f28">联系电话：{{info.phone}}</view>
			
			<!-- <view class="mt20 c3 f28 f">参与人：
			<input class="input" type="text" v-model="userName" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="mt20 c3 f28 f">手机号：
			<input class="input" type="text" v-model="phone" placeholder="请输入" placeholder-class="placeholder" />
			</view> -->
			
			<view class="f-c" style="margin-top: 100rpx;">
				<view class="btn" @click="showfn" :class="info.status == 1 ?'failbtn':''">
					立即参加
				</view>
			</view>
			
			
		</view>
		<u-popup :show="show" :closeable='true' :round="10" mode="center" @close="close" @open="open">
			<view class="p40">
				<view class="mt20 mb20 c3 f28 f pb20" style="white-space: nowrap;">参与人：
				<input class="input" type="text" v-model="userName" placeholder="请输入" placeholder-class="placeholder" />
				</view>
				<view class="mt20 mb20 c3 f28 f pb20" style="white-space: nowrap;">手机号：
				<input class="input" type="text" v-model="phone" placeholder="请输入" placeholder-class="placeholder" />
				</view>
				<view class="btn2"  @click="join">报名</view>
			</view>
		</u-popup>
		
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list1:[],
				high:0,
				info:{},
				activeId:null,
				userName:"",
				phone:"",
				show:false,
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(option){
			this.getHeight()
			if(option.id){
				this.activeId = option.id
				this.getDetail(option.id)
			}
		},
		onShow() {
			
		},
		methods: {
			showfn(){
				
				if(this.info.status == 1){
					this.$api.msg('该活动已关闭')
					return
				}
				this.show = true
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			// 设置scoll高度
			getHeight(){
				let that = this
				uni.getSystemInfo({
					success: function (res) {
						let windowHeight= res.windowHeight;
						let h = that.rpxToPx(440) 
						let hp= windowHeight  - h
						that.high = that.pxToRpx(hp)
						// console.log(that.high ,'windowHeight')
					}
				});
			},
			// rpx转px
			rpxToPx(rpx) {
				// console.log(rpx,'rpx')
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			},
			 
			// px转rpx
			pxToRpx(px) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (750 * Number.parseInt(px)) / screenWidth
			},
			getDetail(id){
				let that = this
				this.$api.request('get', `activity/app/${id}`).then(res => {
				 // console.log(res.data,'res')
				 that.info = res.data
				 that.list1 = [res.data.imgUrl]
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			join(){
				// this.show = true
				// return
				let that = this
				
				if(!that.activeId){
					that.$api.msg('未获取到活动!')
					return
				}
				if(that.info.isJoin === 0){
					that.$api.msg('已报名!')
					return
				}
				if(!that.userName){
					that.$api.msg('请输入姓名!')
					return
				}
				if(!that.phone){
					that.$api.msg('请输入手机号!')
					return
				}
				let activityId = this.activeId
				this.$api.request('post', `activity/app/add`,{
					activityId,
					userName:that.userName,
					phone:that.phone,
					}).then(res => {
					 that.$api.msg('参与成功！')
					 that.show = false
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.bg1,.bg2,.bg3,.bg4{
		width: 338rpx;
		height: 164rpx;
		background: none;
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c1.png');
		background-size: 100% 100%;
		/* box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1); */
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.bg2{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c2.png');
	}
	.bg3{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c3.png');
	}
	.bg4{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c4.png');
	}
	.btn{
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 700rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	
	}
	.btn2{
	
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	
	}
	
</style>
